import React from 'react';
import {connect} from 'react-redux';
import {Button, Spin, Form, Input, Row} from 'antd'
import {browserHistory} from 'react-router'
import {push} from 'react-router-redux'
import {login, post} from '../../libs/http/'
import * as style from '../../style/login.less';

import axios from 'axios'

const FormItem = Form.Item

class Login extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentWillReceiveProps(nextProps) {
        const {authenticated, user} = nextProps;
        const {router} = this.props;
        if (authenticated && !!user) {   // 判断是否登陆
            localStorage.setItem('user', JSON.stringify(user));

            // 切换到admin
            browserHistory.replace('/admin');
        }
    }

    handleOk() {
        let {onOk, form} = this.props;
        let {validateFieldsAndScroll} = form;
        validateFieldsAndScroll((errors, values) => {
            if (errors) {
                console.log(errors);
                return;
            }

            let userInfo = {
                nickname: '王占峰',
                age: 29,
                sex: 1,
                email: 'fengpromail@163.com',
                oschina: 'https://git.oschina.net/organizations/shandongren',
            }

            // 跳转
            // this.props.login(userInfo);

            let params = {
                mobile:'15012341234',
                password:'123456',
            }

            // 获取数据
            this._login(params);

            // 以下方式是结合redux实现数据请求，感觉会增加太多的redux存储，顾放弃
            // this.props.fetchData({action:'account/login', params});
            // this.props.store.dispatch(push('/admin'));
        })
    }

    async _login(params) {
        let resJson = await login(params);

        // 存储数据
        this.props.loginDidFinish(resJson.data);
    }

    render() {
        let {loginButtonLoading, form} = this.props;
        let {getFieldDecorator} = form;

        return (
            <div className="form">
                <div className="logo">
                    <img alt={'logo'} src={'./logo.png'}/>
                    <span>后台管理系统</span>
                </div>
                <form>
                    <FormItem hasFeedback>
                        {getFieldDecorator('username', {
                            rules: [
                                {
                                    required: true,
                                    message: '请填写用户名',
                                },
                            ],
                        })(<Input size="large" onPressEnter={()=>this.handleOk()} placeholder="用户名"/>)}
                    </FormItem>
                    <FormItem hasFeedback>
                        {getFieldDecorator('password', {
                            rules: [
                                {
                                    required: true,
                                    message: '请填写密码',
                                },
                            ],
                        })(<Input size="large" type="password" onPressEnter={()=>this.handleOk()}
                                  placeholder="密码"/>)}
                    </FormItem>
                    <Row>
                        <Button type="primary" size="large" onClick={()=>this.handleOk()}
                                loading={loginButtonLoading}>
                            登录
                        </Button>
                    </Row>
                    <p>
                        <span>版本号：v1.0.0</span>
                    </p>
                </form>
            </div>
        );
    }
}

function mapStateToProps({auth}) {
    let {authenticated, user} = auth;
    return {
        authenticated,
        user,
    }
}

function mapActionToProps(dispatch) {
    return {
        loginDidFinish: (userInfo)=>dispatch({type: 'login', payload: userInfo}),
    }
}

export default connect(mapStateToProps, mapActionToProps)(Form.create()(Login));
